<template>
<<<<<<< HEAD
	  <el-aside width="250px"><v-sidebar></v-sidebar></el-aside>
  <div class="content-box" :class="{ 'content-collapse': sidebar.collapse }">
			<v-header></v-header>
			<v-tags></v-tags>
		 <div class="content">
			<router-view v-slot="{ Component }">
				<transition name="move" mode="out-in">
					<keep-alive :include="tags.nameList">
						<component :is="Component"></component>
					</keep-alive>
				</transition>
			</router-view>
		</div>
    <v-footer></v-footer>
	</div>
	
 <!-- <div class="common-layout"> -->
   <!-- <el-container> -->
      <!-- <el-aside width="250px"><v-sidebar></v-sidebar></el-aside> -->
      <!-- <el-container> -->
		<!-- <el-header ><v-header></v-header></el-header> -->
        <!-- <el-main >
			
		 <div class="content-box" :class="{ 'content-collapse': sidebar.collapse }">
			<v-header></v-header>
			<v-tags></v-tags>
		 <div class="content">
			<router-view v-slot="{ Component }">
				<transition name="move" mode="out-in">
					<keep-alive :include="tags.nameList">
						<component :is="Component"></component>
					</keep-alive>
				</transition>
			</router-view>
		</div>
		<el-footer>
		<v-footer></v-footer>
	  </el-footer>
	</div>
	
	</el-main>
	 
   
      </el-container>
    </el-container> -->
<!-- </div> -->
	 <!-- <v-header /> -->
	<!-- <v-sidebar />
	<div class="content-box" :class="{ 'content-collapse': sidebar.collapse }">
		<v-header />
		<v-tags></v-tags>
		<div class="content">
			<router-view v-slot="{ Component }">
				<transition name="move" mode="out-in">
					<keep-alive :include="tags.nameList">
						<component :is="Component"></component>
					</keep-alive>
				</transition>
			</router-view>
		</div>
		<v-footer></v-footer>
	</div>  -->
 <!-- <v-footer></v-footer> -->
</template>
<script setup>
import { useSidebarStore } from '../stores/sidebar'
import { useTagsStore } from '../stores/tags'
import vHeader from '../components/Header.vue'
import vSidebar from '../components/Asidebar.vue'
import vTags from '../components/Tags.vue'
import vFooter from '../components/Footer.vue';

const sidebar = useSidebarStore();
const tags = useTagsStore();
</script>
<style lang="less" scoped>
.el-header{
	--el-header-padding:0 0;
}
/* .el-container{
	background-color: #f3f3f4;
	
} */
.el-footer{
  //position: fixed;
  margin-bottom: -10px;;
}
</style>
=======
  <el-container class="layout-container-demo">
    <Asidebar/>
    <el-container>
      <Header></Header>
      <el-main>
        <!-- 标签页 -->
        <el-tabs v-model="currentActiveTab" @tab-click="handleTabClick" type="card" closable
                 @tab-remove="handleTabRemove">
          <el-tab-pane
              v-for="tab in tabs"
              :key="tab.name"
              :label="tab.title"
              :name="tab.name"
          >
            <!-- 嵌套路由 -->
            <router-view v-if="activeTab === tab.name"/>
          </el-tab-pane>
        </el-tabs>
      </el-main>
      <el-footer>
        <Footer></Footer>
        <!-- <el-text class="mx-1" type="info">Copyright &copy; 2024-2026  乐码君 版权所有</el-text> -->
      </el-footer>
    </el-container>
  </el-container>

</template>

<script setup>
import Asidebar from '@/components/Asidebar.vue'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'

import {ref, computed, watch, onMounted, reactive} from 'vue'
import {useRouter, useRoute} from 'vue-router'
import {useTabsStore} from '@/stores/tabs.js'

//获取pinia中的标签管理tabs
const tabsStore = useTabsStore()
//获取路由器实例，用途：用于编程式导航和访问全局路由相关的方法和属性。
const router = useRouter()
//获取当前激活的路由对象， 用途：用于访问当前路由的信息，如路径、参数、查询参数、元数据等。
const route = useRoute()
//本页面中:当前激活的标签页
const currentActiveTab = ref(tabsStore.activeTab)

//通过计算属性来获取当前激活的标签页，因为tabsStore.activeTab是响应式的
const activeTab = computed(() => tabsStore.activeTab)
//const activeTab = tabsStore.activeTab
console.log("================ activeTab: ", activeTab.value)

//tabs是要发生变化的，当关闭时，它的元素会删除
const tabs = computed(() => tabsStore.tabs)

const handleTabClick = (tab) => {
  console.log(">>> 点击了标签：", tab.props.label, "对象:", tab)
  //修改tabsStore中的activeTab
  tabsStore.setActiveTab(tab.props.name)
  //编程式路由
  router.push({name: tab.props.name})
}

const handleTabRemove = (tabName) => {
  console.log("点击了删除标签按钮: ", tabName)
  tabsStore.closeTab(tabName)
}

// Watch for changes in tabs and activeTab to persist them
watch(tabs, (newTabs) => {
  console.log("watch tabs: ", newTabs)
  localStorage.setItem('tabs', JSON.stringify(newTabs))
}, {deep: true})

watch(activeTab, (newActiveTab) => {
  console.log("watch activeTab: ", newActiveTab)
  localStorage.setItem('activeTab', newActiveTab)
  //修改currentActiveTab值
  currentActiveTab.value = newActiveTab
})
// 页面加载时恢复状态
onMounted(() => {
  const savedTabs = JSON.parse(localStorage.getItem('tabs'))
  console.log('已保存的tabs: ', savedTabs)
  const savedActiveTab = localStorage.getItem('activeTab')
  console.log('已保存的activeTab: ', savedActiveTab)

  // 恢复isCollapse
  // isCollapse.value = localStorage.getItem('isCollapse') === 'true'

  // 恢复tabs
  if (savedTabs) {
    savedTabs.forEach(tab => {
      tabsStore.addTab(tab)
    })
  }

  // 恢复activeTab
  if (savedActiveTab) {
    tabsStore.setActiveTab(savedActiveTab)
    // 更新本地的currentActiveTab
    currentActiveTab.value = savedActiveTab
    // 更新路由
    router.push({name: savedActiveTab})
  }

})

</script>
<style lang="less" scoped>
.el-container {
  height: 100vh;
}

.el-main {
  padding: 20px 0 20px 20px;
}

/* 自定义激活标签背景颜色 */
:deep(.el-tabs__item.is-active) {
  background-color: var(--el-color-primary) !important;
  color: #fff !important;
}

</style>
>>>>>>> c088509ecc2282a34d0b932f6925d649261c336d
